<template>
  <div class="login">
    <a-spin :spinning="spin_status" tip="Loading...">
      <!-- <header class="login-header">
        <h1 class="logo-text">河北师范大学</h1>
      </header> -->
      <img class="logo" src="../../assets/img/logo-hebei.png" alt="logo" />
      <div class="login-box">
        <form class="login-box__form">
          <h3 class="login-box__form--title">微格教室</h3>
          <br />
          <p class="login-box__form--description">课程资源管理系统</p>

          <div class="login-box__form__group" v-show="errorTipShow">
            <a-alert type="error" message="账号或密码错误" show-icon />
          </div>

          <div class="login-box__form__group validate-input">
            <!-- <p>用户名</p> -->
            <input
              class="login-box__form__input"
              autocomplete="username"
              type="text"
              name="email"
              v-model="account"
              placeholder="手机号/邮箱"
            />
          </div>
          <div class="login-box__form__group validate-input">
            <!-- <p>密码</p> -->
            <input
              class="login-box__form__input"
              autocomplete="current-password"
              type="password"
              name="pass"
              v-model="password"
              placeholder="密码"
            />
          </div>
          <button class="login-btn login-btn--primary" @click.prevent="login">
            登&nbsp;&nbsp;录 &rarr;
          </button>
        </form>
      </div>
      <footer class="footer">
        <p>版权所有 © 大君科技技术有限公司 保留所有权利</p>
        <p>
          推荐使用Chrome 57、Firefox
          52及以上版本的浏览器，推荐分辨率为1600*900或者更高
        </p>
      </footer>
    </a-spin>
  </div>
</template>

<script>
import axios from "@/utils/axios";

export default {
  name: "IndexLogin",
  data() {
    return {
      spin_status: false,
      account: "",
      password: "",
      errorTipShow: false,
      userMap: {
        superAdmin: { name: "super", index: "/supervisor/school" },
        student: { name: "user", index: "/student/home" },
        orgAdmin: { name: "admin", index: "/admin/teacher" },
        teacher: { name: "teacher", index: "/teacher/index" },
        patrol: { name: "patrol", index: "/patrol" },
      },
    };
  },
  methods: {
    login() {
      const requestData = {
        email: this.account,
        password: this.password,
      };
      this.spin_status = true;
      axios
        .post("pc/v1/users/login", requestData)
        .then(({ data }) => {
          const { status, token } = data;
          if (status !== "success") {
            this.errorTipShow = true;
            return;
          }
          localStorage.setItem("tk", token);
          axios.defaults.headers["Authorization"] = "Bearer " + token;
          const navigateUrl = this.updatePublicVuexData(data.data);
          this.spin_status = false;
          this.$router.push(navigateUrl);
        })
        .catch((err) => {
          this.spin_status = false;
          this.errorTipShow = true;
          console.error(err);
        });
    },
    updatePublicVuexData(context) {
      // 存储角色信息入session
      sessionStorage.setItem("role", this.userMap[context.role]["name"]);
      // 
      const publicVuexData = {
        role: this.userMap[context.role]["name"],
        oid: context.org_id,
        uid: context._id,
        photo: context.photo,
        email: context.email,
        studentId: context.user_id,
        entryYear: context.entry_year,
        majorName: context.major_name,
        userName: context.name,
        orgName: context.org_name,
        classesId: context.class_id,
        resources: context.resources,
        subOrgName: context.subOrg_name,
        title: context.title,
      };
      this.$store.commit("public/updateIdList", publicVuexData);
      return this.userMap[context.role]["index"];
    },
    checkInputFormatter() {
      if (!this.message_can) return false;
      if (!this.account) {
        this.$message({ type: "error", message: "请输入账号" });
        this.message_can = false;
        setTimeout(() => (this.message_can = true), 2000);
        return false;
      }
      if (!this.password) {
        this.$message({ type: "error", message: "请输入密码" });
        this.message_can = false;
        setTimeout(() => (this.message_can = true), 2000);
        return false;
      }
      const exp_email = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      const exp_phone = /^1(3|4|5|6|7|8|9)\d{9}$/;
      let isEmail = exp_email.test(this.account);
      let isPhone = exp_phone.test(this.account);
      if (!isEmail && !isPhone) {
        this.$message({ type: "error", message: "请输入邮箱或手机号" });
        this.message_can = false;
        setTimeout(() => (this.message_can = true), 2000);
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.haddddd {
}
</style>
